<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BasicAuth</title>
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/Particleground.js"></script>
    <link href="css/login.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <script>
        $(document).ready(function () {
            $("#login-backgroud").particleground({
                dotColor: '#E8DFE8',
                lineColor: '#133b88'
            })
        })

        function login() {
            if (!$("#verifyCode").val()) {
                alert("请输入验证码");
                return false;
            }
            $.post("/happycaptcha/login", { //happycaptcha
                "userName": $("#userName").val(),
                "userPass": $("#userPass").val(),
                "verifyCode": $("#verifyCode").val()
            }, function (response) {
                if (response) {
                    location.href = "main.html";
                } else {
                    alert("验证码错误");
                    return false;
                }
            })
        }

        function changeValidateCode(obj) {
            //获取当前的时间作为参数，无具体意义
            var timenow = new Date().getTime();
            //每次请求需要一个不同的参数，否则可能会返回同样的验证码
            //这和浏览器的缓存机制有关系，也可以把页面设置为不缓存，这样就不用这个参数了。
            obj.src="/happycaptcha/verifyCode?d="+timenow;//happycaptcha

        }

    </script>
</head>
<body>
<div class="login-backgroud" id="login-backgroud">
    <div class="login-box">
        <form name="loginForm" role="form">
            <div class="title">
                <label><font size="4">请输入登录信息</font></label>
            </div>
            <div class="username">
                <label for="userName"> <img src="img/uesname.png" alt=""></label>
                <input id='userName' name="name" type="text" maxlength="10"
                       placeholder="请输入用户名" autocomplete="off" required>
                <label style="margin-left: 80%;"> <img src="img/tick.png" alt="">
                </label>
            </div>
            <div class="password">
                <label for="userPass"> <img src="img/password.png"></label>
                <!--  两个name一样的输入框，防止浏览器自动记住密码 -->
                <input type="password" name="password" style="display: none">
                <input id='userPass' type="text" name="password" maxlength="10"
                       onfocus="this.type='password'" autocomplete="off"
                       placeholder="请输入密码" required>
                <label style="margin-left: 80%;">
                    <img src="img/tick.png" alt="">
                </label>
            </div>
            <div class="password checked-box clearfix">
                <!-- happycaptcha -->
                <img src="/happycaptcha/verifyCode" onclick="changeValidateCode(this)">
            </div>
            <div class="password checked-box clearfix">
                <input type="text" id="verifyCode"  placeholder="请输入验证码" maxlength="6">
            </div>
            <div class="btn" type="submit" onclick="login()">
                登&nbsp;&nbsp;&nbsp;&nbsp;录
            </div>
        </form>
    </div>
</div>
</body>
</html>